<div class="card">
  <div class="card-header">
    {{ pageTitle }}
    <div style="float: right">
      <button type="button" class="btn btn-secondary" (click)="exportAsPdf()">
        Export as Pdf
      </button>
      &nbsp;
      <button type="button" class="btn btn-secondary" (click)="exportAsCsv()">
        Export as Csv
      </button>
      &nbsp;
      <a class="btn btn-primary" routerLinkActive="active" [routerLink]="['/products/add']">
        Add Product
      </a>
      &nbsp;
      <button class="btn btn-primary" (click)="openImportCsvModal(import_csv_modal_template)">
        Import Csv
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-2">Filter by:</div>
      <div class="col-md-4">
        <input type="text" [(ngModel)]="listFilter" />
      </div>
    </div>
    <div class="row" *ngIf="listFilter">
      <div class="col-md-6">
        <h4>Filtered by: {{ listFilter }}</h4>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table" *ngIf="products && products.length">
        <thead>
          <tr>
            <th>
              <button class="btn btn-primary" (click)="toggleImage()">
                {{ showImage ? "Hide" : "Show" }} Image
              </button>
            </th>
            <th>Product</th>
            <th>Code</th>
            <th>Description</th>
            <th>Price</th>
            <th>5 Star Rating</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let product of filteredProducts">
            <td>
              <img *ngIf="showImage" [src]="product.imageUrl || '/assets/images/logo.png'" [title]="product.name"
                [style.width.px]="imageWidth" [style.margin.px]="imageMargin" />
            </td>
            <td>
              <a [routerLink]="['/products', product.id]">
                {{ product.name }}
              </a>
            </td>
            <td>{{ product.code | uppercase }}</td>
            <td>{{ product.description }}</td>
            <td>{{ product.price || 5 | currency: "USD":"symbol" }}</td>
            <td>
              <pm-star [rating]="product.starRating || 4" (ratingClicked)="onRatingClicked($event)">
              </pm-star>
            </td>
            <td>
              <a class="btn btn-primary" routerLinkActive="active" [routerLink]="['/products/edit', product.id]">
                Edit
              </a>
              &nbsp;
              <button type="button" class="btn btn-primary btn-secondary" (click)="viewAuditLogs(template, product.id)">
                View Audit Logs
              </button>
              &nbsp;
              <app-delete-product [product]="product" (confirmed)="onDeleteConfirmed($event)"></app-delete-product>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div *ngIf="errorMessage" class="alert alert-danger">
  Error: {{ errorMessage }}
</div>

<ng-template #template>
  <div class="modal-body text-center">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Date Time</th>
            <th>User Name</th>
            <th>Action</th>
            <th>Code</th>
            <th>Name</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let auditLog of auditLogs">
            <td>
              {{ auditLog.createdDateTime | date: "dd/MM/yyyy hh:mm:ss" }}
            </td>
            <td>{{ auditLog.userName }}</td>
            <td>{{ auditLog.action }}</td>
            <td [style.color]="auditLog.highLight.code ? 'red' : ''">
              {{ auditLog.data.code }}
            </td>
            <td [style.color]="auditLog.highLight.name ? 'red' : ''">
              {{ auditLog.data.name }}
            </td>
            <td [style.color]="auditLog.highLight.description ? 'red' : ''">
              {{ auditLog.data.description }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</ng-template>

<ng-template #import_csv_modal_template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Import Csv</h4>
    <button type="button" class="btn-close pull-right" aria-label="Close" (click)="importCsvModalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form #form="ngForm" (ngSubmit)="confirmImportCsvFile(form)">
      <div class="mb-3 row">
        <div class="col-sm-12">
          <input id="importingFile" type="file" name="importingFile" class="form-control" required
            (change)="handleFileInput($event.target.files)" [class.is-invalid]="form.submitted && !importingFile" />
          <span class="invalid-feedback"> Select a file </span>
        </div>
      </div>
      <div class="mb-3 row">
        <div class="col-sm-12" style="text-align: center">
          <button class="btn btn-primary">Import</button>
        </div>
      </div>
    </form>
  </div>
</ng-template>